<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" xml:lang="en" lang="en">

    <h:head>
        <title>Chat</title>

		<h:outputStylesheet name="css/main.css"/>
        <h:outputScript name="scripts/ContentController.js"/>
        <h:outputScript name="scripts/CommunicationController.js"/>
    </h:head>

    <h:body>
        <div id="contentParent" class="contentParent"><div id="content" class="content"></div></div>

        <h:form>
            <h:panelGroup id="message" styleClass="messageInputDiv" layout="block">
                <span style="color:gray;font-size:8pt;">My name is: </span><h:inputText styleClass="fromInput" id="from" maxlength="25" value="#{chatBean.from}"/>

                <span id="messageInput">
                    <h:inputTextarea styleClass="messageInput" value="#{chatBean.message}" rows="3" onkeypress="return filterInput(this, event);"/>
                    <h:commandButton value="Submit" action="#{chatBean.postMessage}" style="visibility:hidden;">
                        <f:ajax render="message" execute="@form"/>
                    </h:commandButton>
                </span>
               <div style="color:gray;font-size:8pt;text-align:left;margin-top:-10px;">Ctrl + Enter to submit.</div>
                <script type="text/javascript">
                    document.getElementById('messageInput').firstChild.focus();
                </script>
            </h:panelGroup>
        </h:form>

        <script type="text/javascript">
            var contentController = new ContentController("content", "contentParent");
            contentController.init();
            var commController = new CommunicationController(contentController, '#{facesContext.externalContext.requestContextPath}');
            <ui:repeat value="#{chatBean.history}" var="message">
                contentController.addMessage("#{message.toJSON()}");
            </ui:repeat>
            window.onload = commController.start();

            function filterInput(input, event) {
                if (event.which == 13 &amp;&amp; event.ctrlKey) {
                    input.nextSibling.click();
                    return false;
                } else {
                    return true;
                }
            }
        </script>
    </h:body>

</html>